<!--每月考勤报表明细-->
<template>
  <div class="app-container" style="background-color:#F8F8F8">
    <!-- 列表 -->
    <div
      style="width:100%;height:50%;background-color:#FFF;margin-top:20px;padding:20px"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item label="岗位" prop="postName">
          <el-input
            v-model="queryParams.postName"
            placeholder="请输入岗位"
            clearable
            size="small"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="姓名" prop="staffName">
          <el-input
            v-model="queryParams.staffName"
            placeholder="请输入姓名"
            clearable
            size="small"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="身份证" prop="idCard">
          <el-input
            v-model="queryParams.idCard"
            placeholder="请输入身份证"
            clearable
            size="small"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="组别" prop="groupName">
          <el-input
            v-model="queryParams.groupName"
            placeholder="请输入组别"
            clearable
            size="small"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="班次" prop="shiftId">
          <el-select
            v-model="queryParams.shiftId"
            placeholder="班次"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in timShiftOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出勤状态" prop="abnormalAttendance">
          <el-select
            v-model="queryParams.abnormalAttendance"
            placeholder="出勤状态"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in abnormalAttendances"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getTableRecords"
        ></right-toolbar>
      </el-row>
      <el-row>
        <el-col :span="1.5">
          <el-button
            type="default"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['termJob:attendanceDay:detail:export']"
            >导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="default"
            size="mini"
            plain
            @click="handleImport"
            icon="el-icon-upload2"
            >导入考勤变更
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width:100%;margin-top:10px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="id" prop="id" v-if="false" />
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          label="姓名"
          prop="staffName"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="身份证"
          prop="idCard"
          min-width="180"
          align="center"
        />
        <el-table-column
          label="岗位"
          prop="postName"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="组别"
          prop="groupName"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="班次名称"
          prop="shiftName"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="出勤"
          prop="abnormalAttendance"
          min-width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.abnormalAttendance == 3
                ? "正常"
                : scope.row.abnormalAttendance == 1
                ? "休息"
                : scope.row.abnormalAttendance == 2
                ? "旷工"
                : "异常"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="普通迟到次数"
          prop="normallyLate"
          min-width="140"
          align="center"
        />
        <el-table-column
          label="一般迟到次数"
          prop="usuallyLate"
          min-width="140"
          align="center"
        />
        <el-table-column
          label="严重迟到次数"
          prop="severelyLate"
          min-width="140"
          align="center"
        />
        <el-table-column
          label="早退次数"
          prop="leaveEarly"
          min-width="120"
          align="center"
        />
        <el-table-column
          label="旷工"
          prop="absenteeism"
          min-width="120"
          align="center"
        />
        <!--2021-12-08 13:44:37 by 陈宇寰-->
        <!--表字段名称修改-->
        <!-- <el-table-column label="第一次上班/下班" prop="firstSignInResult" min-width="120" align="center"> -->
        <el-table-column
          label="早上上班"
          prop="firstSignInResult"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.firstSignInResult == 0 ? '无' :scope.row.firstSignInResult == 1 ? '正常' : scope.row.firstSignInResult == 2 ? '普通迟到' : scope.row.firstSignInResult == 3 ? ' 一般迟到 ' : scope.row.firstSignInResult == 4 ? '严重迟到' : scope.row.firstSignInResult == 5 ? '早退' : scope.row.firstSignInResult == 6 ? '旷工' : scope.row.firstSignInResult == 8 ? '休息' : '-' }} / {{ scope.row.firstSignOutResult == 0 ? '无':scope.row.firstSignOutResult == 1 ? '正常' : scope.row.firstSignOutResult == 2 ? '普通迟到' : scope.row.firstSignOutResult == 3 ? ' 一般迟到 ' : scope.row.firstSignOutResult == 4 ? '严重迟到' : scope.row.firstSignOutResult == 5 ? '早退' : scope.row.firstSignOutResult == 6 ? '旷工' : scope.row.firstSignOutResult == 8 ? '休息' : '-' }}</span> -->
            <span>{{
              scope.row.firstSignInResult == 0
                ? "无"
                : scope.row.firstSignInResult == 1
                ? "正常"
                : scope.row.firstSignInResult == 2
                ? "普通迟到"
                : scope.row.firstSignInResult == 3
                ? " 一般迟到 "
                : scope.row.firstSignInResult == 4
                ? "严重迟到"
                : scope.row.firstSignInResult == 5
                ? "早退"
                : scope.row.firstSignInResult == 6
                ? "旷工"
                : scope.row.firstSignInResult == 8
                ? "休息"
                : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打卡时间"
          prop="firstSignInTime"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.firstSignInTime | dateFilter }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="第二次上班/下班" prop="secondSignInResult" min-width="120" align="center"> -->
        <el-table-column
          label="中午上班"
          prop="secondSignInResult"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.secondSignInResult == 0 ? '无' :scope.row.secondSignInResult == 1 ? '正常' : scope.row.secondSignInResult == 2 ? '普通迟到' : scope.row.secondSignInResult == 3 ? ' 一般迟到 ' : scope.row.secondSignInResult == 4 ? '严重迟到' : scope.row.secondSignInResult == 5 ? '早退' : scope.row.secondSignInResult == 6 ? '旷工' : scope.row.secondSignInResult == 8 ? '休息' : '-' }} / {{ scope.row.secondSignOutResult == 0 ? '无':scope.row.secondSignOutResult == 1 ? '正常' : scope.row.secondSignOutResult == 2 ? '普通迟到' : scope.row.secondSignOutResult == 3 ? ' 一般迟到 ' : scope.row.secondSignOutResult == 4 ? '严重迟到' : scope.row.secondSignOutResult == 5 ? '早退' : scope.row.secondSignOutResult == 6 ? '旷工' : scope.row.secondSignOutResult == 8 ? '休息' : '-' }}</span> -->
            <span>{{
              scope.row.secondSignInResult == 0
                ? "无"
                : scope.row.secondSignInResult == 1
                ? "正常"
                : scope.row.secondSignInResult == 2
                ? "普通迟到"
                : scope.row.secondSignInResult == 3
                ? " 一般迟到 "
                : scope.row.secondSignInResult == 4
                ? "严重迟到"
                : scope.row.secondSignInResult == 5
                ? "早退"
                : scope.row.secondSignInResult == 6
                ? "旷工"
                : scope.row.secondSignInResult == 8
                ? "休息"
                : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打卡时间"
          prop="secondSignInTime"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.secondSignInTime | dateFilter }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="第三次上班/下班" prop="thirdSignInResult" min-width="120" align="center"> -->
        <el-table-column
          label="下午上班"
          prop="thirdSignInResult"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.thirdSignInResult == 0 ? '无' :scope.row.thirdSignInResult == 1 ? '正常' : scope.row.thirdSignInResult == 2 ? '普通迟到' : scope.row.thirdSignInResult == 3 ? ' 一般迟到 ' : scope.row.thirdSignInResult == 4 ? '严重迟到' : scope.row.thirdSignInResult == 5 ? '早退' : scope.row.thirdSignInResult == 6 ? '旷工' : scope.row.thirdSignInResult == 8 ? '休息' : '-' }} / {{ scope.row.thirdSignOutResult == 0 ? '无':scope.row.thirdSignOutResult == 1 ? '正常' : scope.row.thirdSignOutResult == 2 ? '普通迟到' : scope.row.thirdSignOutResult == 3 ? ' 一般迟到 ' : scope.row.thirdSignOutResult == 4 ? '严重迟到' : scope.row.thirdSignOutResult == 5 ? '早退' : scope.row.thirdSignOutResult == 6 ? '旷工' : scope.row.thirdSignOutResult == 8 ? '休息' : '-' }}</span> -->
            <span>{{
              scope.row.thirdSignInResult == 0
                ? "无"
                : scope.row.thirdSignInResult == 1
                ? "正常"
                : scope.row.thirdSignInResult == 2
                ? "普通迟到"
                : scope.row.thirdSignInResult == 3
                ? " 一般迟到 "
                : scope.row.thirdSignInResult == 4
                ? "严重迟到"
                : scope.row.thirdSignInResult == 5
                ? "早退"
                : scope.row.thirdSignInResult == 6
                ? "旷工"
                : scope.row.thirdSignInResult == 8
                ? "休息"
                : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打卡时间"
          prop="thirdSignInTime"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.thirdSignInTime | dateFilter }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="下班"
          prop="thirdSignOutResult"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.forthSignInResult == 0 ? '无' :scope.row.forthSignInResult == 1 ? '正常' : scope.row.forthSignInResult == 2 ? '普通迟到' : scope.row.forthSignInResult == 3 ? ' 一般迟到 ' : scope.row.forthSignInResult == 4 ? '严重迟到' : scope.row.forthSignInResult == 5 ? '早退' : scope.row.forthSignInResult == 6 ? '旷工' : scope.row.forthSignInResult == 8 ? '休息' : '-' }} / {{ scope.row.forthSignOutResult == 0 ? '无':scope.row.forthSignOutResult == 1 ? '正常' : scope.row.forthSignOutResult == 2 ? '普通迟到' : scope.row.forthSignOutResult == 3 ? ' 一般迟到 ' : scope.row.forthSignOutResult == 4 ? '严重迟到' : scope.row.forthSignOutResult == 5 ? '早退' : scope.row.forthSignOutResult == 6 ? '旷工' : scope.row.forthSignOutResult == 8 ? '休息' : '-' }}</span> -->
            <span>{{
              scope.row.thirdSignOutResult == 0
                ? "无"
                : scope.row.thirdSignOutResult == 1
                ? "正常"
                : scope.row.thirdSignOutResult == 2
                ? "普通迟到"
                : scope.row.thirdSignOutResult == 3
                ? " 一般迟到 "
                : scope.row.thirdSignOutResult == 4
                ? "严重迟到"
                : scope.row.thirdSignOutResult == 5
                ? "早退"
                : scope.row.thirdSignOutResult == 6
                ? "旷工"
                : scope.row.thirdSignOutResult == 8
                ? "休息"
                : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打卡时间"
          prop="thirdSignOutTime"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.thirdSignOutTime | dateFilter }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)"
            >明细
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <el-dialog
        :title="detailAttendance.title"
        :visible.sync="detailAttendance.open"
        width="40%"
      >
        <div>
          <el-table
            :data="detailAttendance.data"
            v-loading="detailAttendance.loading"
            style="width:100%;height: 100%"
            class="el-table-filter"
          >
            <el-table-column
              label="通行时间"
              prop="dateTime"
              min-width="140"
              align="center"
            />
            <el-table-column
              label="设备编号"
              prop="address"
              min-width="140"
              align="center"
            />
          </el-table>
        </div>
        <div style="text-align: right">
          <el-button @click="onCancel">取消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :title="upload.title"
        :visible.sync="upload.open"
        width="400px"
        append-to-body
      >
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入xls、xlsx格式文件</span>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </el-dialog>

      <pagination
        v-show="total > 10"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getTableRecords"
      />
    </div>
  </div>
</template>

<script>
import {
  listUserDayAttendance,
  // userDayAttendanceExport,
  userDayAttendanceExportWithCondition,
  listAttendancePassRecord
} from "@/api/job/attendance/attendanceMonth";
import { getToken } from "@/utils/auth";
import { listTimShift } from "@/api/partTimeJob/workerInfo/workerInfo";
export default {
  name: "detail",
  filters: {
    dateFilter(dateStr) {
      if (!dateStr) {
        return "-";
      }
      var d = new Date(dateStr);
      const month =
        d.getMonth() + 1 > 9
          ? "" + (d.getMonth() + 1)
          : "0" + (d.getMonth() + 1);
      const day = d.getDate() > 9 ? "" + d.getDate() : "0" + d.getDate();
      const year = d.getFullYear();
      const hour = d.getHours() > 9 ? "" + d.getHours() : "0" + d.getHours();
      const minu =
        d.getMinutes() > 9 ? "" + d.getMinutes() : "0" + d.getMinutes();
      return `${month}-${day} ${hour}:${minu}`;
    }
  },
  data() {
    return {
      ids: [],
      timShiftOptions: [],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "工具类导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          "/workAttendanceApi/updateWorkAttendance"
      },
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      attendanceType: 1,
      workTime: this.$route.query.workTime,
      detailAttendance: {
        title: "",
        open: false,
        data: [],
        loading: false
      },
      abnormalAttendances: [
        { id: 4, name: "正常" },
        { id: 1, name: "休息" },
        { id: 2, name: "旷工" },
        { id: 7, name: "异常" }
      ],
      tableData: [],
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      aid: undefined,
      aGroupName: undefined,
      // 显示搜索条件
      showSearch: true,
      total: 6,
      // 系统设定的正常应该工作的时间
      normalWorkDays: 8,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        staffName: undefined,
        postName: undefined,
        idCard: undefined,
        shiftId: undefined,
        abnormalAttendance: undefined,
        sumRecordId: this.$route.query.id,
        deptName: this.$route.query.deptName,
      },
      attendanceDates: []
    };
  },
  created() {
    this.getTableRecords();
    this.listTimShift();
  },
  methods: {
    /**班次下拉**/
    listTimShift() {
      listTimShift({ status: 1 }).then(response => {
        this.timShiftOptions = response.data;
      });
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getTableRecords();
    },
    // 表单重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getTableRecords() {
      this.loading = true;
      if (this.queryParams.abnormalAttendance == "") {
        this.queryParams.abnormalAttendance = undefined;
      }
      listUserDayAttendance(this.queryParams).then(response => {
        if (response.rows.length > 0) {
          this.attendanceType = response.rows[0].type;
        }
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 详情
    handleView(row) {
      let requestParam = {
        workTime: this.workTime,
        idCard: row.idCard
      };
      this.detailAttendance.loading = true;
      this.detailAttendance.open = true;
      this.detailAttendance.title = "通行时间明细";
      listAttendancePassRecord(requestParam).then(response => {
        this.detailAttendance.loading = false;
        this.detailAttendance.data = response.data;
      });
    },
    onCancel() {
      this.detailAttendance.loading = false;
      this.detailAttendance.open = false;
    },
    handleExport() {
      /* const ids = this.ids;
      console.log(ids);
      if (ids.length < 1) {
        this.msgError("请选择需要导出的数据!");
        return;
      } */
      this.$confirm("是否确认导出每日考勤明细数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.exportLoading = true;
          // return userDayAttendanceExport(ids);
          return userDayAttendanceExportWithCondition(this.queryParams);
        })
        .then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "考勤变更导入";
      this.upload.open = true;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getTableRecords();
    }
  }
};
</script>
<style scoped>
.el-table-filter {
  max-height: 300px;
  overflow: auto;
}
</style>
